import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, message } from 'antd';
import { ModalC, ProductGroupTreeC, InputC, InputNumberC } from '../../../comps';
import { isZiGuanEvir } from '../../../utils/commonFunc';
const FormItem = Form.Item;
import { connect } from 'dva';
const { TextArea } = Input;

@Form.create()
@connect(({ fundManageNewM }) => ({ fundManageNewM }))
export default class TransferModalC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      outAccount: undefined,
      inAccount: undefined,
    };
  }
  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {}

  addForm = () => {
    const { getFieldDecorator } = this.props.form;
    const { maximum } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 5, offset: 0 },
        sm: { span: 8, offset: 0 },
        md: { span: 8, offset: 0 },
        lg: { span: 8, offset: 0 },
        xl: { span: 8, offset: 0 },
        xxl: { span: 8, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 17, offset: 0 },
        sm: { span: 16, offset: 0 },
        md: { span: 16, offset: 0 },
        lg: { span: 16, offset: 0 },
        xl: { span: 16, offset: 0 },
        xxl: { span: 16, offset: 0 },
      },
    };
    const formItemLayout1 = {
      labelCol: {
        xs: { span: 1, offset: 0 },
        sm: { span: 4, offset: 0 },
        md: { span: 4, offset: 0 },
        lg: { span: 4, offset: 0 },
        xl: { span: 4, offset: 0 },
        xxl: { span: 4, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 21, offset: 0 },
        sm: { span: 20, offset: 0 },
        md: { span: 20, offset: 0 },
        lg: { span: 20, offset: 0 },
        xl: { span: 20, offset: 0 },
        xxl: { span: 20, offset: 0 },
      },
    };
    return (
      <div>
        <Form style={{ marginLeft: '20px' }}>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <ProductGroupTreeC
                form={this.props.form}
                title={'划出组合'}
                formItemLayout={formItemLayout}
                dataIndex='outAccount'
                authority={'write'}
                rules={[{ required: true, message: '请选择划出组合' }]}
                multiple={false}
                onChange={(e) => {
                  this.setState({
                    outAccount: e,
                  });
                  this.props.selectOutAccount(e);
                }}
              />
            </Col>

            <Col span={12}>
              <ProductGroupTreeC
                form={this.props.form}
                title={'划入组合'}
                formItemLayout={formItemLayout}
                dataIndex='inAccount'
                authority={'write'}
                multiple={false}
                rules={[{ required: true, message: '请选择划入组合' }]}
                onChange={(e) => {
                  this.setState({
                    inAccount: e,
                  });
                  this.props.selectInAccount(e);
                }}
              />
            </Col>
          </Row>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <InputC form={this.props.form} dataIndex={'moneyType'} title={'币种'} formItemLayout={formItemLayout} initialValue={'人民币'} disabled={true} />
            </Col>
            <Col span={12}>
              <InputNumberC
                dataIndex='amount2'
                title={'限额(元)'}
                precision={2}
                splitStyle={true}
                form={this.props.form}
                formItemLayout={formItemLayout}
                initialValue={maximum}
                disabled={true}
              />
            </Col>
          </Row>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <InputNumberC
                dataIndex='amount'
                title={'发生金额'}
                precision={2}
                min={0}
                max={maximum < 0 ? 0 : maximum}
                rules={[{ required: true, message: '请填写发生金额' }]}
                placeholder='请填写金额(元)(必填)'
                splitStyle={true}
                form={this.props.form}
                formItemLayout={formItemLayout}
              />
            </Col>
          </Row>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={24}>
              <FormItem label='备注' {...formItemLayout1}>
                {getFieldDecorator('remark', {})(<TextArea placeholder='' />)}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    );
  };
  // 修改visible
  changeModalVisible = (msg) => {
    this.props.changeModalVisible(msg);
  };
  onFundModalOk = () => {
    // 操作提交了
    const {
      form: { validateFields },
      dispatch,
      currentUser,
    } = this.props;
    const { outAccount, inAccount } = this.state;
    validateFields(['amount'], (err, fieldsValue) => {
      const amount = fieldsValue.amount;

      if (amount === '0') {
        message.error('请填写有效金额');
        return;
      }

      dispatch({
        type: 'fundManageNewM/transfer',
        payload: {
          outId: outAccount ? outAccount.key : undefined,
          inId: inAccount ? inAccount.key : undefined,
          cash: `${amount}`,
          operateBy: isZiGuanEvir() ? isZiGuanEvir()['iv-user'] : localStorage.getItem('antd-pro-userId'),
        },
      }).then((res) => {
        if (res && res.success) {
          message.success('资金操作成功');
          this.changeModalVisible(false);
          this.props.getResult(true);
        } else {
          message.error('资金操作失败');
        }
      });
    });
  };

  render() {
    const { modalProps } = this.props;
    return (
      <ModalC {...modalProps} onOk={this.onFundModalOk}>
        {this.addForm()}
      </ModalC>
    );
  }
}
